VOS - Controller

De controller bepaalt wat er moet gebeuren als de gebruiker een actie onderneemt. Een gebruiker klikt bijvoorbeeld op een knop Brandmelding. De intentie van de gebruiker wordt door de controller ontvangen, misschien een beetje aangepast (tijdstempel toegevoegd, gebruikers ip) en naar het model gestuurd om het eventueel op te slaan. De controller bepaalt vervolgens welke view moet worden weergegeven en welke gegevens moeten worden opgehaald voor de nieuwe view.

Structuur van de controller

We gebruiken een datadictionary voor de controller. Als sleutel gebruiken we de use case naam. Een use case naam bestaat uit twee delen:

de entiteit: op welke entiteit is de use case van toepassing; bv. fire/index: de gebruiker wil de index pagina van de entiteit brand zien.
uit te voeren actie: welke actie er op de entiteit moet worden uitgevoerd; bijvoorbeeld fire/index: toon de index pagina van de brand entiteit.

var controller = {
    'home': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#home .identity');
            view['home']['index']();
        },
        'gas-leak': function () {
            render.procedure.make('GL');
            view['procedure']('gaslek');
        },
        'amok': function () {
            render.procedure.make('AMOK');
            view['procedure']('AMOK - Geweld');
        },
        'loggingIn': view['home']['loggingIn'],
        'login': function () {
            vos.login();
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#home .identity');
            view['home']['index']();
        },
        'logout': function () {
            vos.logout();
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#home .identity');
            view['home']['index']();
        },
        'settings': vos.settings
    },
    'call': {
        'hot-line': function () {
            phoneCall('+32486788723');
            //window.open('tel:+32486788723');
        }
    },
    'psycho-social-risk': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#psycho-social-risk .identity');
            view['psycho-social-risk']['index']();
        }
    },
    'terror': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#terror .identity');
            view['terror']['index']();
        },
        'bomb-alarm': function () {
            render.procedure.make('BA');
            view['procedure']('bomalarm');
        },
        'suspicious-object': function () {
            render.procedure.make('VV');
            view['procedure']('verdacht voorwerp');
        },
        'terrorist-attack': function () {
            render.procedure.make('TA');
            view['procedure']('terroristische aanslag');
        },
        'amok': function () {
            render.procedure.make('AMOK');
            view['procedure']('AMOK & blind geweld');
        }
    }
    ,
    'accident': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#accident .identity');
            view['accident']['index']();
        },
        'extra-muros': function () {
            render.procedure.make('EM');
            view['procedure']('extra-muros');
        },
        'serious-work-accident': function () {
            render.procedure.make('SWA');
            view['procedure']('ernstig arbeidsongeval');
        },
        'work-accident': function () {
            render.procedure.make('WA');
            view['procedure']('arbeidsongeval');
        },
        'to-from-school': function () {
            render.procedure.make('TFS');
            view['procedure']('van en naar school');
        }
    },
    'fire': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#fire .identity');
            view['fire']['index']('brand');
        },
        'detection': function () {
            render.procedure.make('BM');
            view['procedure']('brandmelding');
        },
        'evacuation': function () {
            render.procedure.make('BREV');
            view['procedure']('brandevacuatie');
        }
    },
    'page': {
        'previous': function () {
            window.history.back();
        }
    }
};

Controller activeren

De controller wordt geactiveerd vooraleer het model te initialiseren. De activeringscode plaatsen helemaal onderaan in het js/vos.js bestand:

document.body.addEventListener('click', dispatcher, false);
vos.setModel();

Controller koppelen aan views

De controller retourneert de view die aan de gebruiker getoond moet worden. Daarvoor maken we een view-structuur. De view-structuur implementeren we ook als een datadictionary:

var view = {
    'home': {
        'index': function () {
            window.location.assign("index.html#home-index");
        },
        'loggingIn': function () {
            window.location.href = "#home-loggingIn";
        }
    },
    'psycho-social-risk': {
        'index': function () {
            window.location.href = "#psycho-social-index";
        }
    },
    'fire': {
        'index': function () {
            window.location.href = "#fire-index";
        }
    }
    ,
    'terror': {
        'index': function () {
            window.location.href = "#terror-index";
        }
    },
    'accident': {
        'index': function () {
            window.location.href = "#accident-index";
        }
    },
    'procedure': function (title) {
        vos.navigateTo('view-procedure', title);
    }
};

Helper functie

Om naar een view te navigeren heb ik een helper functie gemaakt die ook in het js/vos.js bestand staat:

var vos = {
    ...,
    navigateTo: function (view, title) {
    location.href = '#' + view;
    var h1 = document.querySelector('#' + view + ' h1');
    if (title && h1) {
        h1.innerHTML = title;
    },
    ...
}

Deze helper functie staat in de vos namespace.

2017-12-15 15:37:59